<template>
	<view class="cantainer">
		<view class="whiteLine mtb20">
			<view class="p10">
				<view class="flexR between mb10">
					<view class="f16">{{ info.name }}</view>
					<view class="c80">{{ getTime(info.deviceSensibility.date) }}</view>
				</view>
				<view class="flexR between">
					<view style="width: 40%;">
						<view>
							<image class="imgs" mode="widthFix" src="@/static/imgs/icon1.png"></image>
							<span class="name">温度：</span>
							<span class="name" :class="[info.temperatureRed ? 'red' : 'green']">{{ info.earlywartemperature }}℃</span>
						</view>
						<view>
							<image class="imgs" mode="widthFix" src="@/static/imgs/icon2.png"></image>
							<span class="name">湿度：</span>
							<span class="name" :class="[info.humidityRed ? 'red' : 'green']">{{ info.earlywarHumidity }}%</span>
						</view>
					</view>
					<view style="width: 60%;">
						<span class="tt kk"><image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>空气颗粒度0.3：<span :class="[info.humidityRed ? 'red' : 'green']">{{info.earlywarParticle3}}μm</span></span>
						<span class="tt kk"><image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>空气颗粒度0.5：<span :class="[info.humidityRed ? 'red' : 'green']">{{info.earlywarParticle5}}μm</span></span>
						<span class="tt kk"><image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>空气颗粒度1.0：<span :class="[info.humidityRed ? 'red' : 'green']">{{info.earlywarParticle10}}μm</span></span>
						<span class="tt kk"><image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>空气颗粒度2.5：<span :class="[info.humidityRed ? 'red' : 'green']">{{info.earlywarParticle25}}μm</span></span>
						<span class="tt kk"><image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>空气颗粒度5.0：<span :class="[info.humidityRed ? 'red' : 'green']">{{info.earlywarParticle50}}μm</span></span>
						<span class="tt kk"><image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>空气颗粒度10.0：<span :class="[info.humidityRed ? 'red' : 'green']">{{info.earlywarParticle100}}μm</span></span>
					</view>
				</view>

				<view class="flexR between hy">
					<view style="width: 40%;">
						<view>
							<span class="name">温度：</span>
							<span class="name">{{ info.deviceSensibility.temperature }}℃</span>
						</view>
						<view>
							<span class="name">湿度：</span>
							<span class="name">{{ info.deviceSensibility.humidity }}%</span>
						</view>
					</view>
					<view style="width: 60%;">
						<span class="tt kk">空气颗粒度0.3：<span>{{info.deviceSensibility.particle3}}μm</span></span>
						<span class="tt kk">空气颗粒度0.5：<span>{{info.deviceSensibility.particle5}}μm</span></span>
						<span class="tt kk">空气颗粒度1.0：<span>{{info.deviceSensibility.particle10}}μm</span></span>
						<span class="tt kk">空气颗粒度2.5：<span>{{info.deviceSensibility.particle25}}μm</span></span>
						<span class="tt kk">空气颗粒度5.0：<span>{{info.deviceSensibility.particle50}}μm</span></span>
						<span class="tt kk">空气颗粒度10.0：<span>{{info.deviceSensibility.particle100}}μm</span></span>
					</view>
				</view>

			</view>
			<view class="line"></view>
			<view class="p10">
				<image class="imgs" mode="widthFix" src="@/static/imgs/icon-localtion.png"></image>
				<span class="c80">{{ info.address || '暂无' }}</span>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
import listWarn from '@/components/listWarn.vue';
import { parseTime } from '@/utils/index'

export default {
	components: { listWarn },
	data() {
		return {
			info: {},
		};
	},
	onLoad(option) {
		let {id, type, doId} = option;
		this.getList(id);
		if(type==1) {
			this.finsh(doId);
		}
	},
	methods: {
		finsh(doId) {
			this.$axios({
				method: 'put',
				url: `/api/sysNotice`,
				data: {
					id: doId,
					isNotice: 1
				}
			}).then(res => {
				
			})
		},
		getTime(v) {
			return parseTime(v)
		},
		getList(id) {
			this.$axios({
				method: 'get',
				url: `/senor/warn/app/${id}`,
			}).then(res => {
				this.info = res;
			});
		}

	}
}
</script>

<style lang="scss" scoped>
.imgs {
	width: 15px;
	margin-right: 5px;
}
.hy {
	background: #f9f9f9;
	border-radius: 10px;
	padding: 10px 5px;
	margin: 10px 0;
}
.red {
	color: red !important;;
}
.green {
	color: #11A8A3 !important;
}
.tt {
	display: inline-block;
	width: 100%;
}
</style>
